<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">

        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            margin: 50px auto;
            padding: 10px;
            background-color: greenyellow;
            /*设置文本居中*/
            text-align: center;
        }
    </style>

    <script type="text/javascript">

		/**
		 * DOM案例：图片切换
		 * 技术范围：window函数、document函数、js基础语法、css基础语法
		 */

		/**
		 * 在这个特定的代码片段中，window.onload被设置为一个匿名函数，这意味着当页面加载完成时，这个匿名函数将被执行。
		 * 这个函数通常用于初始化页面上的元素或执行其他需要在页面加载完成后才能进行的操作。
		 */
        window.onload = function () {
            /*
             * 点击按钮切换图片
             */

            //获取两个按钮
            var prev = document.getElementById("prev");
            var next = document.getElementById("next");

            /*
             * 要切换图片就是要修改img标签的src属性
             */

            //获取img标签
            var img = document.getElementsByTagName("img")[0];

            //创建一个数组，用来保存图片的路径
            var imgArr = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg"];

            //创建一个变量，来保存当前正在显示的图片的索引
            var index = 0;

            //获取id为info的p元素
            var info = document.getElementById("info");
            //设置提示文字
            info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";


            //分别为两个按钮绑定单击响应函数
            prev.onclick = function () {

                /*
                 * 切换到上一张，索引自减
                 */
                index--;

                //判断index是否小于0
                if (index < 0) {
//					小于0，则回到末尾
                    index = imgArr.length - 1;
                }

                img.src = imgArr[index];

                //变化情况：当点击按钮以后，重新设置信息
                info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";
            };

            next.onclick = function () {

                /*
                 * 切换到下一张是index自增
                 */
                index++;

//				如果大于最大索引，则归0
                if (index > imgArr.length - 1) {
                    index = 0;
                }

                //切换图片就是修改img的src属性
                //要修改一个元素的属性 元素.属性 = 属性值
                img.src = imgArr[index];

                //变化情况：当点击按钮以后，重新设置信息
                info.innerHTML = "一共 " + imgArr.length + " 张图片，当前第 " + (index + 1) + " 张";

            };


        };


    </script>
</head>
<body>
<div id="outer">
    <!--			切换信息-->
    <p id="info"></p>
    <!--			图片区-->
    <img src="img/1.jpg" alt="冰棍"/>
    <!--			按钮区-->
    <button id="prev">上一张</button>
    <button id="next">下一张</button>

</div>
</body>
</html>
